<template>
  <div>
    <el-card class="box-card !border-none" shadow="never">
        <el-page-header content="聊天记录" :icon="ArrowLeft" @back="$router.back()" />
    </el-card>
    <f-table class="mt-[15px]" ref="tableRef" @register="register">
      <template #face="{ row }">
        <div class="img_box">
          <img class="img" :src="row.face" alt="">
          <div>{{ row.username }}</div>
        </div>
      </template>
      <template #action="{ row }">
        <el-space wrap>
            <el-button type="primary" link @click="handleDelete(row)">{{ t('delete') }}</el-button>
        </el-space>
      </template>
    </f-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { t } from '@/lang'
import { useRoute } from 'vue-router'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/activity.video.chat'
import { deleteProblemApi, getUserViewChatApi } from '@/addon/htscrm/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'

const route = useRoute()

const tableRef = ref()
const { methods, register } = useTable({
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<any>[],
    beforeFetch: (opt) => {
        return {
            ...opt,
            huodong_id: route.query.id
        }
    },
    api: async (opt) => (await getUserViewChatApi({
      ...opt,
      huodong_id: route.query.id,
    })).data
})

/**
 * @description 删除数据
 */
async function handleDelete (row: IProblemItem) {
    const action = await ElMessageBox.alert(t('deleteTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await deleteProblemApi(row.id)
        ElMessage.success(t('deleteSuccess'))
        methods.reload()
    }
}
</script>

<style lang="scss" scoped>
.img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 6px;
}
.img_box{
  display: flex;
  align-items: center;
}
</style>
